<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      rel="stylesheet"
      href="https://cdn.bootcss.com/element-ui/2.4.0/theme-chalk/index.css"
    />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/reset.css@2.0.2/reset.min.css"
    />
  </head>
  <body>
    <div id="root">
      <router-view></router-view>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue-router/3.4.8/vue-router.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vuex/3.5.1/vuex.min.js"></script>
    <script src="https://cdn.bootcss.com/element-ui/2.4.0/index.js"></script>
    <script src="https://cdn.bootcss.com/Mock.js/1.0.0/mock-min.js"></script>
    <!-- <script src="https://cdn.bootcss.com/lodash.js/4.17.10/lodash.min.js"></script> -->
    <script type="module">
      //  Vuex
      import store from "./store.js";
      // VueRouter
      import router, { initDynamicRoutes } from "./router.js";

      Vue.directive("permission", {
        // 特定时期会被调用
        inserted(el, binding) {
          const action = binding.value.action;
          const effect = binding.value.effect;
          if (router.currentRoute.meta.indexOf(action) == -1) {
            if (effect === "disabled") {
              el.disabled = true;
              // 在element-ui里需要这么做
              el.classList.add("is-disabled");
            } else {
              // 找他爹给孩子删掉,删除哪个孩子,当前的孩子
              el.parentNode.removeChild(el);
            }
          }
        },
      });

      new Vue({
        el: "#root",
        router,
        store,
        created() {
          // 解决动态路由刷新问题
          initDynamicRoutes();
        },
      });
    </script>
  </body>
</html>
